<!--
/**
* @description 设备监测
* @author wind-lc
* @date 2020-06-11
*/
-->
<template>
  <div class="equipment-monitoring-container">
    <!-- 搜索侧边栏 -->
    <div class="equipment-monitoring-screen"
         :class="{'equipment-monitoring-screen-min':!searchVisible}">
      <div class="equipment-monitoring-screen-visible"
           @click="searchVisible = !searchVisible">
        <icon-svg type="icon-zuozuo-"></icon-svg>
      </div>
      <div class="equipment-monitoring-search">
        <a-input-search placeholder="请输入企业名称" />
      </div>
      <div class="equipment-monitoring-tree">
        <a-tree :treeData="treeData"
                showLine
                :selectedKeys="selectedKeys"
                @select="treeSelect">
        </a-tree>
      </div>
    </div>
    <!-- 搜索侧边栏 -->
    <!-- 内容 -->
    <div class="equipment-monitoring-wrapper"
         :class="{'equipment-monitoring-wrapper-max':!searchVisible}">
      <!-- 企业信息 -->
      <div class="equipment-monitoring-info-wrapper">
        <div class="equipment-monitoring-info">
          <img :src="enterpriseInfo.img"
               alt="">
          <div class="equipment-monitoring-info-content">
            <h5>{{enterpriseInfo.name}}</h5>
            <div class="equipment-monitoring-info-box">
              <ul>
                <li>
                  <span>地址</span>
                  <p :title="enterpriseInfo.address">{{enterpriseInfo.address}}</p>
                </li>
                <li>
                  <span>企业负责人</span>
                  <p :title="enterpriseInfo.responsiblePersons">{{enterpriseInfo.responsiblePersons}}</p>
                </li>
                <li>
                  <span>所属行业</span>
                  <p :title="enterpriseInfo.industry">{{enterpriseInfo.industry}}</p>
                </li>
                <li>
                  <span>联系电话</span>
                  <p :title="enterpriseInfo.phone">{{enterpriseInfo.phone}}</p>
                </li>
              </ul>
              <ul>
                <li>
                  <span>绩效分级</span>
                  <p :title="enterpriseInfo.performance">{{enterpriseInfo.performance}}</p>
                </li>
                <li>
                  <span>许可证管理类别</span>
                  <p :title="enterpriseInfo.licenseManagementCategory">{{enterpriseInfo.licenseManagementCategory}}</p>
                </li>
                <li>
                  <span>许可证号</span>
                  <p :title="enterpriseInfo.license">{{enterpriseInfo.license}}</p>
                </li>
                <li>
                  <span>是否发证</span>
                  <p :title="enterpriseInfo.isLicense">{{enterpriseInfo.isLicense}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 工艺流程图 -->
        <div class="equipment-monitoring-info-equipment">
          <h3>工艺流程图</h3>
          <div v-if="enterpriseInfo.topologyImg"
               @click="equipmentChartVisible = true"
               class="equipment-monitoring-info-topology">
            <img :src="enterpriseInfo.topologyImg"
                 alt="">
          </div>
          <!-- 数据监测 -->
          <a-modal v-model="equipmentChartVisible"
                   title="数据监测"
                   centered
                   destroyOnClose
                   :width="'80%'"
                   style="min-width:1000px;">
            <template slot="footer">
              <a-button key="back"
                        @click="equipmentChartVisible = false">关闭</a-button>
            </template>
            <div class="equipment-monitoring-chart-list">
              <a-tabs default-active-key="1"
                      :animated="false"
                      @change="tabsChange">
                <a-tab-pane key="1"
                            tab="负荷曲线">
                  <!-- 负荷曲线 -->
                  <div class="equipment-monitoring-chart-item">
                    <div class="equipment-monitoring-chart-item-control">
                      <ul class="equipment-monitoring-chart-date-checkbox">
                        <li @click="today? yesterday =!yesterday: yesterday =true"
                            :class="{'equipment-monitoring-chart-date-checkbox-active' : yesterday}">
                          <icon-svg type="icon-zuo"></icon-svg>
                          <span>昨日</span>
                        </li>
                        <li @click="yesterday? today =!today: today =true"
                            :class="{'equipment-monitoring-chart-date-checkbox-active' : today}">
                          <span>今日</span>
                          <icon-svg type="icon-you"></icon-svg>
                        </li>
                      </ul>
                    </div>
                    <e-line class="equipment-monitoring-chart"
                            :option="loadOption"
                            :ready="loadReady"></e-line>
                  </div>
                  <!-- 负荷曲线 -->
                </a-tab-pane>
                <a-tab-pane key="2"
                            tab="历史记录">
                  <!-- 历史记录 -->
                  <div class="equipment-monitoring-chart-item">
                    <div class="equipment-monitoring-chart-item-control">
                      <a-range-picker :show-time="{ format: 'HH:mm' }"
                                      format="YYYY-MM-DD HH:mm"></a-range-picker>
                    </div>
                    <e-line class="equipment-monitoring-chart"
                            :option="historyOption"
                            :ready="historyReady"></e-line>
                  </div>
                  <!-- 历史记录 -->
                </a-tab-pane>
                <a-tab-pane key="3"
                            tab="电量对比">
                  <!-- 电量对比 -->
                  <div class="equipment-monitoring-chart-item">
                    <div class="equipment-monitoring-chart-item-control">
                      <a-range-picker :show-time="{ format: 'HH:mm' }"
                                      format="YYYY-MM-DD HH:mm"></a-range-picker>
                    </div>
                    <e-line class="equipment-monitoring-chart"
                            :option="powerOption"
                            :ready="powerReady"></e-line>
                  </div>
                  <!-- 电量对比 -->
                </a-tab-pane>
              </a-tabs>
            </div>
          </a-modal>
          <!-- 数据监测 -->
        </div>
        <!-- 工艺流程图 -->
        <!-- 报警 -->
        <div class="equipment-monitoring-info-equipment">
          <h3>报警</h3>
          <a-table :columns="alarmColumns"
                   :dataSource="alarmTable"
                   rowKey="id"
                   size="middle"
                   :loading="alarmTableLoading"
                   :pagination="alarmTablePagination">
          </a-table>
        </div>
        <!-- 报警 -->
      </div>
      <!-- 企业信息 -->
    </div>
    <!-- 内容 -->
  </div>
</template>
<script>
import IconSvg from '@/components/IconSvg'
import { Input, Tree, Tabs, DatePicker, Table, Modal, Button } from 'ant-design-vue'
import ELine from '@/components/ECharts/ELine'
import echarts from 'echarts'
export default {
  name: 'equipmentMonitoring',
  components: {
    IconSvg,
    AInputSearch: Input.Search,
    ATree: Tree,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    ARangePicker: DatePicker.RangePicker,
    ATable: Table,
    ELine,
    AModal: Modal,
    AButton: Button
  },
  data () {
    return {
      // 隐藏显示搜索侧边栏
      searchVisible: true,
      // 选中企业
      selectedKeys: [],
      // 企业树
      treeData: [
        {
          title: '成都市新都金海污水处理有限责任公司',
          key: '111',
          children: [
            {
              title: '生产线一',
              key: '111-0',
              children: [
                {
                  title: '设备二',
                  key: '111-0-1'
                },
                {
                  title: '设备二',
                  key: '111-0-2'
                }
              ]
            },
            {
              title: '生产线二',
              key: '111-1',
              children: [
                {
                  title: '设备三',
                  key: '111-01-1'
                },
                {
                  title: '设备四',
                  key: '111-1-2'
                }
              ]
            }
          ]
        },
        {
          title: '成都南玻玻璃有限公司',
          key: '222',
          children: [
            {
              title: '生产线一',
              key: '222-0',
              children: [
                {
                  title: '设备一',
                  key: '222-0-1'
                },
                {
                  title: '设备二',
                  key: '222-0-2'
                }
              ]
            },
            {
              title: '生产线二',
              key: '222-1',
              children: [
                {
                  title: '【原水】二厂区1号回流泵设施',
                  key: '222-1-1'
                },
                {
                  title: '【生产】5号车间电源',
                  key: '222-1-2'
                }
              ]
            }
          ]
        }
      ],
      // 企业信息
      enterpriseInfo: {
        address: '',
        responsiblePersons: '',
        industry: '',
        phone: '',
        performance: '',
        licenseManagementCategory: '',
        license: '',
        isLicense: '',
        topologyImg: '',
        organizationImg: ''
      },
      // 负荷曲线时间段
      yesterday: false,
      today: true,
      // 设备表头
      alarmColumns: [
        {
          title: '序号',
          align: 'center',
          ellipsis: true,
          width: 80,
          customRender: (text, record, index) => {
            if (!record.disabled) {
              return index + 1
            }
          }
        },
        {
          title: '设备名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'name'
        },
        {
          title: '终端号',
          align: 'center',
          ellipsis: true,
          dataIndex: 'num'
        },
        {
          title: '类别',
          align: 'center',
          ellipsis: true,
          dataIndex: 'type'
        },
        {
          title: '状态',
          align: 'center',
          ellipsis: true,
          dataIndex: 'status'
        },
        {
          title: '报警时间',
          align: 'center',
          ellipsis: true,
          dataIndex: 'alarmTime'
        },
        {
          title: '报警原因',
          align: 'center',
          ellipsis: true,
          dataIndex: 'alarmReason'
        },
        {
          title: '设备累积报警次数',
          align: 'center',
          ellipsis: true,
          dataIndex: 'alarmTotal'
        }
      ],
      alarmTable: [],
      alarmTableLoading: false,
      alarmTablePagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页显示数量
        showQuickJumper: true, // 跳转
        showSizeChanger: true, // 显示改变每页数量
        total: 0, // 总数
        pageSizeOptions: ['10', '15', '20', '25'],
        showTotal: total => `共 ${total} 条`// 显示总数
      },
      // 设备图表模态框显示隐藏
      equipmentChartVisible: false,
      // 负荷曲线图表数据选项
      loadOption: {
        color: ['#1890ff', '#d14a61', '#675bba'],
        title: {
          subtext: '单位(kw)',
          subtextStyle: {
            fontSize: 14,
            color: '#333333'
          }
        },
        // 图表外间距
        grid: {
          top: '50',
          right: '10',
          bottom: '50',
          left: '20',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 分隔线
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            fontSize: 14,
            color: '#333333'
          },
          data: []
        },
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            fontSize: 14,
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            interval: 0,
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 50,
            handleSize: 8
          }
        ],
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#a5d3ff'
            }, {
              offset: 1,
              color: 'rgba(255,255,255,0.0)'
            }])
          }
        }]
      },
      // 负荷曲线图表数据加载完成
      loadReady: false,
      // 历史记录图表选项
      historyOption: {
        color: ['#1890ff', '#d14a61', '#675bba'],
        title: {
          subtext: '单位(kw)',
          subtextStyle: {
            fontSize: 14,
            color: '#333333'
          }
        },
        // 图表外间距
        grid: {
          top: '50',
          right: '10',
          bottom: '50',
          left: '20',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 分隔线
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            fontSize: 14,
            color: '#333333'
          },
          data: []
        },
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            fontSize: 14,
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            interval: 0,
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 50,
            handleSize: 8
          }
        ],
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#a5d3ff'
            }, {
              offset: 1,
              color: 'rgba(255,255,255,0.0)'
            }])
          }
        }]
      },
      // 历史记录数据加载完成
      historyReady: false,
      // 电量对比图表选项
      powerOption: {
        color: ['#1890ff', '#d14a61', '#675bba'],
        title: {
          subtext: '单位(kw)',
          subtextStyle: {
            fontSize: 14,
            color: '#333333'
          }
        },
        // 图表外间距
        grid: {
          top: '50',
          right: '10',
          bottom: '50',
          left: '20',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 分隔线
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            fontSize: 14,
            color: '#333333'
          },
          data: []
        },
        yAxis: {
          type: 'value',
          // 轴线
          axisLine: {
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          },
          // 轴刻度
          axisTick: {
            show: false
          },
          // 轴标签
          axisLabel: {
            fontSize: 14,
            color: '#333333'
          },
          // 分隔线
          splitLine: {
            interval: 0,
            lineStyle: {
              color: '#e6e6e6',
              type: 'dashed'
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 50,
            handleSize: 8
          }
        ],
        series: [{
          data: [],
          type: 'line',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#a5d3ff'
            }, {
              offset: 1,
              color: 'rgba(255,255,255,0.0)'
            }])
          }
        }]
      },
      // 电量对比数据加载完成
      powerReady: false
    }
  },
  watch: {
    equipmentChartVisible: {
      handler (newV, oldV) {
        if (newV) {
          this.getLoadData()
        }
      }
    }
  },
  mounted () {
    this.init(this.$route.params.id)
  },
  methods: {
    // 初始化
    init (id = '111') {
      this.selectedKeys = [id]
      this.treeSelect([id])
    },
    // 树选择
    treeSelect (selectedKeys) {
      this.selectedKeys = selectedKeys
      const list = [
        {
          id: '111',
          table: [
            {
              id: '12312',
              name: '【原水】二厂区1号回流泵设施',
              num: 'CD21343545',
              type: '产污',
              status: '在线',
              alarmTime: '2020-06-15 12:00:00',
              alarmReason: '停产没有执行到位',
              alarmTotal: 15
            },
            {
              id: '123121',
              name: '【生产】5号车间电源',
              num: 'BQ22241231',
              type: '产污',
              status: '在线',
              alarmTime: '2020-06-14 14:22:23',
              alarmReason: '限产没有执行到位',
              alarmTotal: 15
            }
          ]
        },
        {
          id: '222',
          table: [
            {
              id: '12312',
              name: '【原水】二厂区1号回流泵设施',
              num: 'CD21343545',
              type: '产污',
              status: '在线',
              alarmTime: '2020-06-15 12:00:00',
              alarmReason: '未按要求的时间执行停产',
              alarmTotal: 15
            },
            {
              id: '123121',
              name: '【生产】5号车间电源',
              num: 'BQ22241231',
              type: '产污',
              status: '在线',
              alarmTime: '2020-06-14 14:22:23',
              alarmReason: '未按要求的时间执行限产',
              alarmTotal: 15
            }
          ]
        }
      ]
      const arr = [
        {
          id: '111',
          name: '成都市新都金海污水处理有限责任公司',
          address: '成都市新都区新都镇万和村',
          responsiblePersons: '赵统刚',
          industry: '8290',
          phone: '15000280962',
          performance: 'A',
          licenseManagementCategory: '简化管理',
          license: '293847562726354625321A',
          isLicense: '已发证',
          img: 'http://dev-my-common.meiy520.com/upload/demo2/1591867788948-bec9bce1-b5d3-446d.jpg',
          topologyImg: require('@/assets/temp/111.jpg')
        },
        {
          id: '222',
          name: '成都南玻玻璃有限公司',
          address: '四川省成都市双流区公兴街道黄龙大道二段16号',
          responsiblePersons: '何进',
          industry: '3041',
          phone: '84268077',
          performance: 'A',
          licenseManagementCategory: '简化管理',
          license: '029384758291258693452B',
          isLicense: '已发证',
          img: 'http://dev-my-common.meiy520.com/upload/demo2/1592218647956-d9e9c6d5-638f-485e.jpg',
          topologyImg: require('@/assets/temp/222.jpg')
        }
      ]
      if (selectedKeys.length > 0) {
        let id = ''
        this.treeData.forEach(el => {
          if (selectedKeys[0].split('-')[0] === el.key) {
            id = el.key
          }
        })
        arr.forEach(el => {
          if (el.id === id) {
            this.enterpriseInfo = el
          }
        })
        list.forEach(el => {
          if (el.id === id) {
            this.alarmTable = el.table
          }
        })
      }
    },
    // 获取负荷数据
    getLoadData () {
      this.loadReady = false
      setTimeout(() => {
        this.loadOption.series[0].data = this.getData(24)
        this.loadOption.xAxis.data = this.getDate(24)
        this.loadReady = true
      }, 600)
    },
    // 获取历史记录数据
    getHistoryData () {
      this.historyReady = false
      setTimeout(() => {
        this.historyOption.series[0].data = this.getData(12)
        this.historyOption.xAxis.data = this.getDate(12)
        this.historyReady = true
      }, 600)
    },
    // 获取电量对比数据
    getPowerData () {
      this.powerReady = false
      setTimeout(() => {
        this.powerOption.series[0].data = this.getData(12)
        this.powerOption.xAxis.data = this.getDate(12)
        this.powerReady = true
        console.log('?')
      }, 600)
    },
    // 生成假数据
    getData (lenght) {
      const arr = []
      for (let i = 0; i <= lenght; i++) {
        arr.push(Math.floor(Math.random() * (15 - 10 + 1) + 10))
      }
      return arr
    },
    // 生成时间轴
    getDate (num) {
      const arr = []
      for (let i = 0; i < num; i++) {
        if (i < 10) {
          arr.push('0' + i + ':' + '00')
        } else {
          arr.push(i + ':' + '00')
        }
      }
      return arr
    },
    // 标签切换
    tabsChange (activeKey) {
      switch (activeKey) {
        case '1':
          this.getLoadData()
          break
        case '2':
          this.getHistoryData()
          break
        case '3':
          this.getPowerData()
          break
      }
    }

  }
}
</script>
<style lang="scss">
.equipment-monitoring-container {
  height: 100%;
  position: relative;
}
.equipment-monitoring-screen {
  height: 100%;
  width: 286px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: left ease 0.4s;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
}
.equipment-monitoring-screen-min {
  left: -286px;
  .equipment-monitoring-screen-visible .icon-svg {
    transform: rotate(180deg);
  }
}
.equipment-monitoring-screen-visible {
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -60px;
  width: 30px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0 60px 60px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  .icon-svg {
    font-size: 16px;
    color: #666666;
    margin-left: 2px;
  }
}
.equipment-monitoring-search {
  height: 30px;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  & > span {
    margin: -1px;
    width: 248px;
  }
}
.equipment-monitoring-tree {
  background: #ffffff;
  border-radius: 4px;
  margin-top: 20px;
  height: calc(100% - 52px);
  overflow-x: hidden;
  overflow-y: auto;
  span {
    max-width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.equipment-monitoring-wrapper {
  background-color: #ffffff;
  transition: padding ease 0.4s;
  height: 100%;
  padding: 30px 30px 30px 316px;
  overflow-x: hidden;
  overflow-y: auto;
}
.equipment-monitoring-wrapper-max {
  padding-left: 30px;
}
.equipment-monitoring-info-wrapper {
  background-color: #ffffff;
  box-shadow: 0 2px 16px 0 rgba(208, 208, 208, 0.5);
  border-radius: 4px;
}
.equipment-monitoring-info {
  display: flex;
  padding: 20px;
  & > img {
    width: 240px;
    height: 160px;
  }
}
.equipment-monitoring-info-content {
  width: calc(100% - 260px);
  margin-left: 20px;
  h5 {
    background-color: #f0f0f0;
    height: 46px;
    line-height: 46px;
    font-size: 18px;
    color: #333333;
    padding: 0 20px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  ul {
    width: 50%;
    &:nth-of-type(1) {
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 1px;
        height: 68px;
        background-color: #e7e7e7;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -34px;
      }
      li {
        span {
          width: 30%;
          min-width: 80px;
        }
      }
    }
    &:nth-of-type(2) li {
      span {
        width: 40%;
        min-width: 100px;
      }
    }
    li {
      padding: 6px 20px;
      font-size: 14px;
      color: #000000;
      display: flex;
      p {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.equipment-monitoring-info-box {
  display: flex;
}
.equipment-monitoring-info-equipment {
  padding: 0 20px 20px 20px;
  & > h3 {
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
.equipment-monitoring-info-topology {
  border: 1px solid #e7e7e7;
  img {
    display: block;
    width: 60%;
    margin: 0 auto;
    cursor: pointer;
  }
}
.equipment-monitoring-chart-item {
  height: 443px;
  background-color: #ffffff;
  position: relative;
}
.ant-tabs-nav-scroll {
  background-color: #f4f4f4;
}
.ant-tabs-bar {
  border: none;
  margin: 0;
}
.ant-tabs-nav .ant-tabs-tab {
  margin: 0;
  padding: 20px 42px;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.7px;
}
.ant-tabs-ink-bar {
  top: 0;
  height: 4px;
}
.ant-tabs-nav .ant-tabs-tab-active {
  background-color: #ffffff;
}
.equipment-monitoring-chart-item-control {
  position: absolute;
  top: -45.5px;
  right: 20px;
  background-color: #ffffff;
  height: 30px;
  overflow: hidden;
  max-width: 300px;
  & > span > span {
    margin: -1px -4px;
    width: 308px;
  }
}
.equipment-monitoring-chart-date-checkbox {
  width: 150px;
  display: flex;
  align-items: center;
  height: 30px;
  li {
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    cursor: pointer;
    span {
      font-size: 14px;
    }
    .icon-svg {
      font-size: 18px;
    }
    &:nth-of-type(1) {
      span {
        margin-left: 4px;
      }
    }
    &:nth-of-type(2) {
      .icon-svg {
        margin-left: 4px;
      }
    }
  }
  .equipment-monitoring-chart-date-checkbox-active {
    color: #1890ff;
  }
}
.equipment-monitoring-chart {
  height: 100%;
}
</style>
